<template>
	<view style="background-color: darkgray;height: 90vh;">
		
		<view id="nr" style="height: 80vh;overflow-y: auto;">
			<view v-for="data in data" style="margin-bottom: 10rpx;display: flex;align-items: center;background-color: #FFFF;border-radius: 5px;">
				<span>{{data.from}}  :</span>
				<span :style="{color:data.color1,fontSize:data.size}">{{data.content}}</span>
			</view>
		</view>
		<view class="row"  style="position: absolute;bottom: 0;background-color: #FFFF;">
			 <input v-model="nr" type="text" style="width: 45%;height: 100%;"  value="" placeholder="请文明发言" />
			<input v-model="size" type="number" style="width: 30%;height: 100%;"  value="" placeholder="请输入字体大小" />
		    <el-color-picker style="width: 10%;" v-model="color1"></el-color-picker>
		     <button @click="upload" type="default" size="mini" style="height: 70rpx;">发送</button>
		</view>
		
	
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				title: 'Hello',
				data:[],
				err:null,
				color1: '#409EFF',
				nr:'',
				size:'',
				name:'',
			
				
			}
		},
		onLoad() {
			let aa=''
			uni.getStorage({
				key:'name',
				success(res) {
					aa=res.data
				},
				
				fail() {
					uni.reLaunch({
						url:'/pages/login/login'
					})
				}
				
				
			})
			if(aa!=''){
				this.name=aa
				this.init()
			}
			
			
			
		},
		
		methods: {
		
			init(){
				uni.connectSocket( {
					url:"ws://192.168.1.3:9090/chat/"+this.name+"/1234",
					success() {
						console.log("连接打开")
						uni.showToast({
							title:"成功123"
						})
					},
					fail(res) {
						uni.showToast({
							title:res
						})
					}
					
				})
				uni.onSocketOpen((res)=> {
					console.log("成功")
					uni.showToast({
						title:"ok"
					})
				} )
				uni.onSocketMessage((res)=>{
					
					let data=JSON.parse((JSON.parse(res.data)).content)     
					this.data.push(data)
					console.log(data)
					console.log(this.data)
					
					
				})
				uni.onSocketError((res)=>{
					this.err=res
				})
			},
			upload(){
				let data=JSON.stringify({
					content:this.nr,
					color1:this.color1,
					size:this.size+"px",
					from:this.name
					
				})
				uni.sendSocketMessage({
					data:data,
					success() {
						uni.showToast({
							title:"ok"
						})
					}
				})
			}
		},
		
	}
</script>

<style>
	.row{
		display: flex;
		flex-direction: row;
	}
</style>
